<!--
 * @FilePath: 插入节点.html
 * @Author: 苏苏少年
 * @Date: 2022-12-06 12:24:46
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        write()        将任意的字符串插入到文档中                                
        appendChild()  向元素中添加新的子节点，作为最后一个子节点       
        insertBefore() 向指定的已有的节点之前插入新的节点newltem: 
                        要插入的节点exsitingltem: 
                        参考节点需要参考父节点 |
     -->
     <ul>
        <li id="red">红色</li>
        <li>黑色</li>
     </ul>
</body>
<script>
    // write()   将任意的字符串插入到文档中 
    document.write("<h2>你好</h2>");    
    document.write("<h2>Hello</h2>");    

    // insertBefore() 向指定的已有的节点之前添加新的节点.
    var li = document.createElement("li");
    var text = document.createTextNode("粉色");
    li.appendChild(text)
    // console.log(li);
    document.getElementById("red").parentElement.insertBefore(li,document.getElementById("red"));
</script>
</html>